Grafika na webových stránkách
Základní formáty grafiky pro web
- Pro webové stránky se používají především tři grafické formáty: JPG - GIF - PNG
- Využití jednotlivých formátů a ukázky jsou níže.
- Pro správné zobrazení ukázek, musíte mít nastavený monitor na True
Color!
JPEG (JPG)
- výhody : vysoká komprese, zachování barev
- nevýhody : ztrátová komprese = originál a komprimovaný obrázek se liší (podle nastavení*)
- použití : fotografie (kde nejsou ostré hrany a jemné detaily)
V příkladu je obrázek 150×100px, který měl v originále(BMP) 44,1kB.
- Obr. 1 = komprese z BMP na JPG (95) = 9.0 kB
- Obr. 2 = komprese z BMP na JPG (70) = 4.7 kB
- Obr. 3 = komprese z BMP na JPG (40) = 3.4
kB
GIF
- výhody : vysoká komprese (do 256 barev - neztrátová) možnost průhlednosti a animací
- nevýhody : omezení na 256 barev
- použití : tlačítka, ovládací
prvky, animované bannery apod.
V příkladu je obrázek 150×100px, který měl v originále(BMP) 44,1kB.
- Obr. 1 = komprese z BMP na GIF (256 barev v režimu "detail") = 8.2 kB
- Obr. 2 = komprese z BMP na GIF (256 barev) = 5.7 kB
- Obr. 3 =
komprese z BMP na GIF (128 barev) = 4.3 kB
Specifické vlastnosti formátu GIF
Možnost volby "průhledné" barvy.
Možnost zpestření stránek animacemi ve formátu animovaného GIF u
PNG
- výhody : neztrátová v režimu true color, a při dodržení počtu barev
- nevýhody : nízká komprese v true color
- použití : tlačítka, ovládací
prvky
V příkladu je obrázek 150×100px, který měl v originále(BMP) 44,1kB.
- Obr. 1 = komprese z BMP na PNG (true color) = 15.9 kB
- Obr. 2 = komprese z BMP na PNG (256 barev) = 8.0 kB
- Obr. 3 = komprese z BMP na PNG (128 barev) = 6.9 kB
Práce s obrázky
- Při tvorbě webových stránek se běžně užívá rastrových grafických formátů.
- Ke správě grafických zdrojů slouží specializovaný software tzv. grafické editory
- Pro základní operace s obrázky postačí i vestavěný systémový modul Malování (Start/Příslušenství/Malování). Zajistí změny velikosti, překlopení, otočení, doplnění písma a kreslení atd.
Příklad přípravy obrázku v prostředí Malování. - Náročnější grafické editace garantují např. prostředí Corel Photo-paint, Adobe Photoshop atd. (obrázek ke cvičení úprav)
Nejpoužívanější grafické editory
- klasické:
- Photoshop - www.photoshop.com nebo http://www.adobe.com/cz/products/photoshop/family/?promoid=BPAZB
(nejpoužívanější, nejlepší, placený, možnost stažení zkušební verze na 30 dnů) - GIMP - www.gimp.org nebo www.gimp.cz
(zdarma, volně šiřitelný, primárně určený pro Linux, ale stejně použitelný ve windows)
- Photoshop - www.photoshop.com nebo http://www.adobe.com/cz/products/photoshop/family/?promoid=BPAZB
- online:
- www.pixlr.com
(spousta funkcí, podobný Photoshopu, bohužel není v češtině) - www.photoeditor.cz
(český, všechny důležité funkce, zastaralejší design)
- www.pixlr.com
Vytváření složitějších animací
Jedno z mnoha tvůrčích prostředí: Macromedia Flash (http://www.adobe.com)
Náhled do pracovního prostředí: Demonstrační animace